import React, { useEffect } from 'react';
import * as styles from '../styles/layout.scss';

export default (listPage, detailPage) => {
  let _isList = false;

  return (props) => {
    const { location } = props;
    const path = location.pathname.toLowerCase();
    const isDetail = path.indexOf(detailPage.path.toLowerCase()) >= 0;
    if (!_isList) _isList = path.indexOf(listPage.path.toLowerCase()) >= 0;

    useEffect(() => {
      return () => {
        _isList = false;
      };
    }, []);

    return (
      <React.Fragment>
        {_isList && <div className={styles.divList} style={{ display: isDetail ? 'none' : '' }}>{React.createElement(listPage.component, props)}</div>}
        {isDetail && React.createElement(detailPage.component, props)}
      </React.Fragment>
    );
  };
};